/**
 * Created by HZH
 * Date-Time: 2022-01-26
 */

import React, { useRef, useState } from 'react';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { TheTable } from '@/components';
import styles from './index.less';

const getList = async function () {
  const data = [
    {
      id: '0',
      name: '名称',
      creator: '黄忠浩',
      editor: '前端',
      desc: '描述信息',
      createTime: new Date(),
      updateTime: new Date(),
      status: '0'
    }
  ];
  return {
    data: data,
    current: 1,
    pageSize: "20",
    total: 25,
    success: true
  };
};

export default () => {
  const actionRef = useRef();
  const [selectedRowKeys, setSelectedRowKeys]  = useState([]);
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '描述',
      dataIndex: 'desc',
      search: false,
    },
    {
      title: '创建人',
      dataIndex: 'creator',
    },
    {
      title: '修改人',
      dataIndex: 'editor',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'select',
      initialValue: '0',
      valueEnum: {
        '0': { text: '全部', status: '0' },
        '1': { text: '关闭', status: '1' },
        '2': { text: '运行中', status: '2' },
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      valueType: 'dateTime',
      search: false,
    },
    {
      title: '操作',
      key: 'option',
      width: 120,
      valueType: 'option',
      render: () => [
        <a key="link">编辑</a>,
        <a key="warn">删除</a>,
      ],
    },
  ];

  const handleSetSelectedRowKeys = (val) => {
    setSelectedRowKeys(val)
  };

  return (
    <TheTable
      actionRef={actionRef}
      toolBarRender={() => [
        <Button type="primary" key="primary">
          <PlusOutlined /> 新建
        </Button>,
      ]}
      columns={columns}
      request={getList}
      beforeSearchSubmit={(params) => {
        console.log(params)
      }}
      rowSelection={{
        selectedRowKeys: selectedRowKeys,
        onChange: handleSetSelectedRowKeys
      }}
      search={{
        optionRender: (searchConfig, formProps, dom) => [
          ...dom.reverse(),
          <Button type="primary" ghost key="out">导出</Button>,
        ],
      }}
    />
  );
};
